<template>
    <h2 class="title">{{ title }}</h2>
    <ul class="list">
        <li v-for="item in list" :key="item.id">
            <RouterLink :to="'/article/' + item.id">{{ item.date }}
                <span class="article_title">{{ item.title }}</span>
            </RouterLink>
        </li>
    </ul>
</template>

<script lang="ts" setup>
import { watch, ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import type SearchList from '@/components/home/type/searchList'
import { getByTagIdArticleList, getByCategoryIdArticleList, getByValueArticleList } from '@/api/api'
import SearchEnum from '@/components/home/enum/search'
const router = useRoute();

const title = ref();

const list = ref<SearchList[]>();

watch(router, () => {
    handeData();
})

handeData();
function handeData() {
    title.value = router.params.name;
    switch (Number(router.params.type)) {
        case SearchEnum.search:
            getByValueArticle();
            break;
        case SearchEnum.category:
            getByCategoryIdArticle();
            break;
        case SearchEnum.label:
            getByTagIdArticle();
            break;
    }
}

async function getByTagIdArticle() {
    const res = await getByTagIdArticleList(router.params.value);
    list.value = res.data;
}

async function getByCategoryIdArticle() {
    const res = await getByCategoryIdArticleList(router.params.value);
    list.value = res.data;
}

async function getByValueArticle() {
    const res = await getByValueArticleList(router.params.value);
    list.value = res.data;
}

</script>

<style lang="less" scoped>
.title {
    margin: 30px 0;
    font-size: 32px;
}

.list {

    li {
        font-size: 14px;
        list-style-type: disc;
        color: var(--text-info);
        margin: 8px 0px 8px 15px;

        p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /* 超出几行省略 */
            -webkit-line-clamp: 1;
            overflow: hidden;
        }

        .article_title {
            cursor: pointer;
            margin-left: 10px;
            color: var(--content-color);
        }
    }
}
</style>